<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul {
    margin: 0;
    padding: 0;
    list-style: none;
} 
img {
    vertical-align: top;
}
/* body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
} */
#wrap {
    margin: 40px auto;
    position: relative;
    width: 600px;
    height: 400px;
    border: 2px solid #000;
    overflow:hidden;
}    
#pics {
    width:600px;
    height: 400px;
    position: relative;
}
#pics li{
    position: absolute;
    left: 0;
    top:0;
    width: 600px;
    height: 400px;
   
}

#pics p {
    width: 600px;
    height: 400px;
    color:#fff;
    text-align: center;
    background: red;
    margin: 0;
}
#pics li:nth-of-type(2n+1) p{
    background: green;
}
#pics li:nth-of-type(2n+2) p{
    background: blue;
}
.btn {
    position: absolute;
    top: 170px;
    z-index: 2;
    width: 60px;
    font: 40px/60px "宋体";
    text-align: center;
    background: rgba(255, 255, 255, .6);
    text-decoration: none;
    color: #000;
}
.btn:hover {
    background: #fff;
}
.prev {
    left: 0;
}
.next {
    right: 0;
}
#navs {
    position: absolute;
    left: 0;
    bottom: 10px;
    z-index: 3;
    width: 100%;
    text-align: center;
}
#navs a {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #fff;
}
#navs .active {
    background: #f60;
}
</style>
</head>
<body>
<div id="wrap">
    <ul id="pics">
        <li>
            <p>第三张图片</p>
        </li>
        <li>
            <p>第二张图片</p>
        </li>
        <li>
            <p>第一张图片</p>
        </li>
    </ul>
    <a href="javascript:;" class="btn prev"><</a>
    <a href="javascript:;" class="btn next">></a>
    <nav id="navs">
        <a class="active"></a>
        <a></a>
        <a></a>
    </nav>
</div>
<script src="js/mTween.js"></script>
<script>
    /*
        1. 改变的是ul 的子级li 全部定位，利用transition 做动画，注意的是transition 需要在transitionend 清楚掉之前的样式
        
    */
    var oUl = document.querySelector('#pics');
    var prev = document.querySelector('.prev');
    var next = document.querySelector('.next');
    var aBtn = document.querySelectorAll('#navs a');
    var lis = oUl.children;
    var iconNum = 0; //图标的索引
    var iNow = lis.length - 1;

    [...lis].forEach( item=> {
        item.addEventListener('transitionend',end);
    });
    next.addEventListener('click',function(){
        rightMove();
    });
    prev.addEventListener('click',function(){
        leftMove();
    });


    function leftMove() {
        lis[iNow].style.transition = '.5s';
        lis[iNow].style.left = '-100%';
        iconNum --; 
        for( var i=0;i<aBtn.length;i++ ) {
            aBtn[i].classList.remove('active');
        }
        aBtn[iconNum%aBtn.length].classList.add('active');
    }
    function rightMove() {
        lis[iNow].style.transition = '.5s';
        lis[iNow].style.left = '100%';
        
        iconNum ++; 
        for( var i=0;i<aBtn.length;i++ ) {
            aBtn[i].classList.remove('active');
        }
        aBtn[iconNum%aBtn.length].classList.add('active');
    }
    function end() {
        this.style.cssText="";
        oUl.insertBefore(lis[iNow],lis[0]);
    }
</script>
</body>
</html>